<template>
	<view>
		<!-- tab栏 -->
		<u-sticky bgColor="#fff">
			<view class="ListTab"><u-tabs :list="list1" :itemStyle="{ width: '110px', height: '44px' }" @click="click"></u-tabs></view>
		</u-sticky>
		<!-- 体检项 -->
		<view class="phy-exam-back" v-for="(item,index) in phyList" :key="index" @click="goDetail">
			<text class="phy-exam-type">{{item.title}}</text>
			<view class="phy-exam-flex">
				<image src="../../../../static/logo.png" mode=""></image>
				<view class="">
					<text class="phy-exam-title">{{item.be_suit}}</text>
					<text class="phy-exam-label">{{item.describe}}</text>
				</view>
			</view>
			<view class="phy-exam-price">
				<text>已约{{item.sales}}</text>
				<text>{{item.price}}</text>
			</view>
		</view>
		<!-- 分隔 -->
		<view style="height: 100rpx;"></view>
	</view>
</template>

<script>
	import {getPhyExamListApi} from '../../../../utils/api.js'
export default {
	data() {
		return {
			list1: [
				{
					name: '全部'
				},
				{
					name: '销量'
				},
				{
					name: '价格'
				}
			],
			// 体检套餐列表
			phyList:[]
		};
	},
	methods: {
		click(item) {
			console.log('item', item);
		},
		async getPhyExamList(){
			const res = await getPhyExamListApi()
			console.log(res);
			this.phyList  = res.data
		},
		// 跳转详情页
		goDetail(){
			uni.navigateTo({
				url:"../Detail/Detail"
			})
		}
	},
	created() {
		this.getPhyExamList()
	}
};
</script>

<style lang="less">
	page{
	  background-color: #fafafa;
	}
	.ListTab{
		display: flex;
		justify-content: space-around;
	}
	/* 体检套餐 */
	.phy-exam-back{
	  background-color: #ffffff;
	  padding: 20rpx;
	  margin: 20rpx;
	  border-radius: 10rpx;
	}
	.phy-exam-type{
	  font-size: 35rpx;
	  font-weight: bold;
	}
	.phy-exam-flex image{
	  width: 200rpx;
	  height: 200rpx;
	  display: block;
	}
	.phy-exam-flex{
	  display: flex;
	  justify-content: center;
	  padding: 20rpx 0;
	  border-bottom: 1rpx solid #f6f6f6;
	}
	.phy-exam-flex view{
	  flex: 1;
	  padding-left: 20rpx;
	}
	.phy-exam-flex text{
	  display: block;
	}
	.phy-exam-title{
	  font-weight: bold;
	  padding-bottom: 20rpx;
	}
	.phy-exam-label{
	  color: #5555;
	}
	.phy-exam-price{
	  display: flex;
	  justify-content: space-between;
	  padding-top: 20rpx;
	  font-weight: bold;
	  color: #ff5f2c;
	}
</style>
